﻿<template>
    <div v-cloak class="flex-column">
        <component is="style" />
        <van-dropdown-menu active-color="#1989fa">
            <van-dropdown-item v-model="query.bId" :options="modelList" popup-style="max-height: 50vh;"></van-dropdown-item>
            <van-dropdown-item v-model="query.eoApplications" :options="applications" popup-style="max-height: 50vh;"></van-dropdown-item>
            <van-dropdown-item disabled>
                <template #title>
                    <van-button type="info" size="small" v-on:click="AddCar">新增机油</van-button>
                </template>
            </van-dropdown-item>

        </van-dropdown-menu>
        <div class="flex-column-fill">
            <hxt-refresh v-model="refresh.isLoading" :has-more="refresh.hasMore" v-on:loadList="loadList">
                <div class="margin-top-10" v-for="(item,index) in list">
                    <van-swipe-cell :before-close="deleteClick" :name="item.eoId">
                        <van-card :tag="index+1" thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
                                  :origin-price="item.eoOldProce" :price="item.eoPrice" :num="item.eoStock">
                            <div slot="title" style="font-weight: 700;">
                                {{item.eoBrand}}
                            </div>
                            <div slot="desc">
                                型号：{{item.eoModel}}

                            </div>
                            <div slot="tags">
                                容量：{{item.eoCapacity}}L

                            </div>
                            <div slot="price-top">

                                适用车型：{{item.eoApplications}}
                                <!-- 时间：{{item.eoTime}} -->
                            </div>
                        </van-card>
                        <template #right>
                            <van-button square text="删除" type="danger" class="delete-button" />
                        </template>
                    </van-swipe-cell>
                </div>
            </hxt-refresh>
        </div>
        <hxt-popup v-model="showAdd" round closeable getContainer="body">
            <template #title>
                新增机油
            </template>
            <div class="bg-light flex-column">
                <van-cell-group inset>
                    <van-field label="机油品牌" placeholder="请输入机油品牌" v-model="form.eoBrand" clearable></van-field>
                </van-cell-group>
                <van-cell-group inset class="margin-top-10">
                    <van-field label="机油型号" placeholder="请输入机油型号" v-model="form.eoModel" clearable></van-field>
                </van-cell-group>
                <van-cell-group inset class="margin-top-10">
                    <van-field label="适用车型" placeholder="请输入适用车型" v-model="form.eoApplications" clearable></van-field>
                </van-cell-group>
                <van-cell-group inset class="margin-top-10">
                    @*<van-field label="容量" placeholder="请输入容量" type="digit" v-model="form.eoCapacity" clearable></van-field>*@
                    <van-cell title="容量">
                        <van-stepper v-model="form.eoCapacity" theme="round" button-size="22" min="0" decimal-length="2"></van-stepper>
                    </van-cell>
                </van-cell-group>
                <van-cell-group inset class="margin-top-10">
                    @*<van-field label="底价" placeholder="请输入底价" type="digit" v-model="form.eoOldProce" clearable></van-field>*@
                    <van-cell title="底价">
                        <van-stepper v-model="form.eoOldProce" theme="round" button-size="22" min="0" decimal-length="2"></van-stepper>
                    </van-cell>
                </van-cell-group>
                <van-cell-group inset class="margin-top-10">
                    @*<van-field label="售价" placeholder="请输入售价" type="digit" v-model="form.eoPrice" clearable></van-field>*@
                    <van-cell title="售价">
                        <van-stepper v-model="form.eoPrice" theme="round" button-size="22" min="0" decimal-length="2"></van-stepper>
                    </van-cell>
                </van-cell-group>
                <van-cell-group inset class="margin-top-10">
                    <van-cell title="库存">
                        <van-stepper v-model="form.eoStock" theme="round" button-size="22" min="0"></van-stepper>
                    </van-cell>                    
                </van-cell-group>
            </div>
            <template #foot>
                <div class="padding-15 bg-light">
                    <van-button round block type="info" v-on:click="submit">保 存</van-button>
                </div>
            </template>
        </hxt-popup>
    </div>
</template>
<script>
    module = (function (hxt) {
        return {
            name: 'engineOil',
            data: function () {
                return {
                    optor: hxt.store.optor,
                    browser: hxt.wxBrowser(), // 1：手机微信；4：小程序
                    refresh: { hasMore: true, isLoading: false },
                    query: {
                        bId: 0,
                        eoApplications: '',
                        pageIndex: 0,
                        pageSize: 20,
                        rowCount:0,
                    },
                    list: [],
                    applications: [],
                    modelList: [],
                    showAdd: false,
                    form: {
                        optType: 0,
                        eoId: 0,
                        eoBrand: '',
                        eoModel: '',
                        eoApplications: '',
                        eoCapacity: '',
                        eoPrice: '',
                        eoOldProce: '',
                        eoStock: '',
                        eoImg: '',
                        openId: hxt.store.optor.openId,
                        state: 'engineOil'
                    },
                };
            },
            computed: {

            },
            activated: function () {

            },
            watch: {
                'query.bId': function (val) {
                    var _this = this;
                    _this.list = [];
                    _this.pageIndex = 1;
                    _this.loadList();
                },
                'query.eoApplications': function (val) {
                    var _this = this;
                    _this.list = [];
                    _this.pageIndex = 1;
                    _this.loadList();
                }
            },
            mounted: function () {
                var _this = this;
                _this.$parent.showHome = true;
                _this.loadModel();
                _this.loadList();
            },
            methods: {
                loadModel: function (e) {
                    var _this = this;
                    var applications = [{
                        text: '全部',
                        value: ''
                    }];
                    var modelList = [{
                        text: '全部',
                        value: 0
                    }];
                    hxt.post({
                        url: hxt.config.link + "pc/eoModelList",
                        data: {},
                        ok: function (res) {
                            if (res.code != 0) return hxt.error(res.errmsg, '获取机油品牌列表失败');
                            _this.modelList = modelList.concat(res.data);
                        }
                    });
                    hxt.post({
                        url: hxt.config.link + "pc/getCars",
                        data: {},
                        ok: function (res) {
                            if (res.code != 0) return hxt.error(res.errmsg, '获取车型列表失败');
                            var map = res.data.map(function (it) {
                                return {
                                    text: it.cName,
                                    value: it.cName
                                }
                            })
                            _this.applications = applications.concat(map);
                        }
                    });
                },
                loadList: function (e) {
                    var _this = this;
                    if (!e) {
                        _this.query.pageIndex = 1;
                    };
                    hxt.post({
                        url: hxt.config.link + 'pc/engineOilList',
                        data: _this.query,
                        ok: function (res) {
                            if (res.code != 0) {
                                _this.refresh.hasMore = !!e;
                                hxt.error(res.errmsg, '加载失败');
                                return;
                            }
                            var list = _this.query.pageIndex == 1 ? [] : _this.list;
                            _this.list = list.concat(res.data.list);
                            _this.query.pageIndex++;
                            _this.query.pageSize = res.data.pageSize;
                            _this.query.rowCount = res.data.rowCount;
                            _this.refresh.hasMore = res.data.pageIndex * res.data.pageSize < res.data.rowCount;
                        },
                        complete: function () {
                            _this.refresh.isLoading = false;
                        },
                        error: function (err) {
                            _this.refresh.hasMore = !!e;
                        }
                    });
                },
                deleteClick: function (e) {
                    console.log(e)
                    if (e.position != "right") return;
                    hxt.confirm("注意：删除后不能找回", function () {
                        hxt.post({
                            url: hxt.config.link + 'pc/engineOilAdd',
                            data: {
                                openId: _this.optor.openId,
                                optType: 2,
                                eoId: e.name,
                                state: _this.form.state
                            },
                            ok: function (res) {
                                if (res.code != 0) return hxt.error('删除失败：' + res.errmsg);
                                hxt.success('删除成功');
                                var index = _this.list.findIndex(function (item) { item.eoId==e.name });
                                _this.list.splice(index, 1);
                            },
                            complete: function () {
                                e.instance.close();
                            },
                        });
                    }, function () {
                        e.instance.close();
                    }, "","确定删除吗？");
                },
                AddCar: function (e) {
                    var _this = this;
                    _this.form.eoId = 0;
                    _this.form.eoBrand = '';
                    _this.form.eoModel = '';
                    _this.form.eoApplications = '';
                    _this.form.eoCapacity = 0;
                    _this.form.eoPrice = 0;
                    _this.form.eoOldProce = 0;
                    _this.form.eoStock = 0;
                    _this.form.eoImg = '';
                    _this.showAdd = true;
                    _this.form.optType = 0;
                },
                submit: function () {
                    var _this = this,
                        form = _this.form;
                    if (_this.oldform == JSON.stringify(_this.form)) return hxt.msg('提交失败：资料未更改');
                    if (!$.trim(form.eoBrand)) return hxt.error('提交失败：请输入机油品牌');
                    if (!$.trim(form.eoModel)) return hxt.error( '提交失败：请输入机油型号');
                    if (!$.trim(form.eoApplications)) return hxt.error('提交失败：请输入适用车型');
                    if (form.eoCapacity <= 0) return hxt.error( '提交失败：请输入容量');
                    if (form.eoOldProce <= 0) return hxt.error('提交失败：请输入底价');
                    if (form.eoPrice <= 0) return hxt.error('提交失败：请输入售价');
                    if (form.eoStock <= 0) return hxt.error('提交失败：请输入库存数量');
                    form.openId = _this.optor.openId;
                    hxt.confirm("确定添加？", function () {
                        hxt.post({
                            url: hxt.config.link + "pc/engineOilAdd",
                            data: form,
                            ok: function (res) {
                                if (res.code != 0) return hxt.error('操作失败：' + res.errmsg);
                                hxt.success('操作成功');
                                _this.loadModel();
                                _this.loadData();
                            }                            
                        });
                    });
                }
            },
            components: {

            }
        };
    })(window.$jscript.fn);
</script>
<style>
    .delete-button {
        height: 100%;
    }
    .van-dropdown-menu__item--disabled .van-dropdown-menu__title::after{
        content:none;
    }
</style>